<!-- 文件所有权归北京优博泰克 -->
<!-- 我的待办 -->
<template>
    <div class="home-page-container">
        <!-- 当前在线人数 -->
        <div class="online-person">
            <div class="person-info">
                <div class="person-count">
                    <!-- 人员图标 -->
                    <SvgIcon iconName="person" class="person-icon" />
                    <span class="label">当前在线人数: </span>
                    <span class="value">{{ On_line_Preson }}</span>
                </div>
                <div class="total-count">
                    <span class="label">总登陆人数: </span>
                    <span class="value">{{ All_Preson }}</span>
                </div>
            </div>
            <div class="department-info"></div>
        </div>
        <!-- 待办区域 -->
        <div class="todo-section">
            <!-- 我的待办卡片 -->
            <div class="my-todo card">
                <div class="card-title">
                    <img src="@/assets/svg/overview.svg" alt="">
                    <span>我的待办</span>
                </div>
                <div class="card-content">
                    <div v-for='(it, idx) in mytodoList' :key='it.label'
                        :class="['todo-item', { active: index === idx }]" @click='changeicon(idx)'>
                        <img :src="index === idx ? it.icon1 : it.icon" alt="">
                        <span class="todo-count">{{ it.num }}</span>
                        <span class="todo-label">{{ it.label }}</span>
                    </div>
                </div>
            </div>

            <!-- 通知公告卡片 -->
            <div class="notification-card card">
                <div class="card-header">
                    <div class="header-left">
                        <img src="@/assets/svg/overview.svg" alt="">
                        <span>通知公告</span>
                    </div>
                    <p @click="more" v-show="msgList.length">更多</p>
                </div>
                <div class="notification-content" v-show="msgList.length">
                    <div v-for="item in msgList" :key="item.id" class="notification-item" @click="linkTo(item)">
                        <div class="notification-text">
                            <p v-html="item.text"></p>
                        </div>
                        <span class="notification-date">{{ commonV.formatDate(item.create_date, 'yyyy-MM-dd') }}</span>
                    </div>
                </div>
                <div class="empty-notification" v-show="!msgList.length">
                    暂无信息
                </div>
            </div>

            <!-- 完成统计卡片 -->
            <div class="completion-card card">
                <div class="card-title">
                    <img src="@/assets/svg/overview.svg" alt="">
                    <span>完成统计</span>
                </div>
                <div class="completion-content">
                    <div v-for='it in completeList' :key='it.label' class="completion-item">
                        <span class="completion-label">{{ it.label }}</span>
                        <span class="completion-value">{{ it.num }}</span>
                    </div>
                </div>
            </div>
        </div>

        <!-- 表格区域 -->
        <div class="table-container card">
            <!-- 表格菜单 -->
            <el-menu :default-active="menuindex" class="el-menu-demo" mode="horizontal" @select="handleSelect"
                background-color="#F5F7FA" text-color="#8492A6" active-text-color="#0165B4">
                <el-menu-item index="waitassign" v-show='[0, 1, 2, 3, 4, 6].includes(index)'>待我处理</el-menu-item>
                <el-menu-item index="myapprove" v-show='[0, 5].includes(index)'>待我审批</el-menu-item>
                <el-menu-item index="mythreetask" v-show='[0].includes(index)'>台架三级任务</el-menu-item>
                <el-menu-item index="myTwoTask" v-show='[0].includes(index)'>我负责的二级任务</el-menu-item>
                <!-- 超级用户维护 -->
                <el-menu-item index="allwaitassign" v-show='UserMsg.is_superuser'>所有待办</el-menu-item>
            </el-menu>
            <!-- 表格内容 -->
            <dy-table ref="myeltable" @handleSelect="handleSelect" :elTable_Options="elTable_Options" @handleClick="handleClick" />
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted, nextTick } from 'vue'
import { useRouter } from 'vue-router'
import commonV from '@/common'
import api from '@/api'

// 初始化路由
const router = useRouter()

// 定义响应式变量
const menuindex = ref('waitassign') // 当前选中的菜单项
const UserMsg = JSON.parse(localStorage.getItem("UserMsg")) // 用户信息
const index = ref(0) // 当前选中的待办项索引
const elTable_Options = ref({
    selection: false,
    getwayname: "",
    pagetittype: "",
    searchList: [],
    eltableArr: [],
    addConditions: []
}) // 表格配置
const fliterT = ref([]) // 过滤条件
const On_line_Preson = ref(null) // 当前在线人数
const All_Preson = ref(null) // 总登录人数
const msgList = ref([]) // 通知公告列表

let myeltable = ref(null)

// 待办列表数据
const mytodoList = ref([
    {
        icon: commonV.require("@/assets/svg/all-close.svg"),
        icon1: commonV.require("@/assets/svg/all.svg"),
        num: 0,
        key: 'my_logs_num',
        label: "全部"
    },
    {
        icon: commonV.require("@/assets/svg/over-close.svg"),
        icon1: commonV.require("@/assets/svg/over.svg"),
        num: 0,
        key: 'my_task_num',
        label: "我的任务单"
    },
    {
        icon: commonV.require("@/assets/svg/participate-close.svg"),
        icon1: commonV.require("@/assets/svg/participate.svg"),
        num: 0,
        key: 'my_plan_num',
        label: "我的子任务"
    },
    {
        icon: commonV.require("@/assets/svg/repair-close.svg"),
        icon1: commonV.require("@/assets/svg/repair.svg"),
        num: 0,
        key: 'my_repair_num',
        label: "我的维修单"
    },
    {
        icon: commonV.require("@/assets/svg/maintenance-close.svg"),
        icon1: commonV.require("@/assets/svg/maintenance.svg"),
        num: 0,
        key: 'my_maintain_num',
        label: "我的保养单"
    },
    {
        icon: commonV.require("@/assets/svg/approval-close.svg"),
        icon1: commonV.require("@/assets/svg/approval.svg"),
        num: 0,
        key: 'my_app_num',
        label: "我的审批单"
    },
    {
        icon: commonV.require("@/assets/svg/resources-close.svg"),
        icon1: commonV.require("@/assets/svg/resources.svg"),
        num: 0,
        key: 'my_process_num',
        label: "资源审批单"
    }
])

// 完成统计列表数据
const completeList = ref([
    { label: "已完成任务", num: 0, key: 'finish_num' },
    { label: "已审批任务", num: 0, key: 'app_num' }
])

// 生命周期钩子
onMounted(() => {
    getmytododata() // 获取待办数据
    getOnlinePerson() // 获取在线人数
    getAllPerson() // 获取总登录人数
    getUserMsgList() // 获取通知公告

    changeicon(0)
})

/**
 * 获取我的待办数据
 */
const getmytododata = async () => {
    let res = await api.getaxiosdata("homepagedata", {
        "user_id": UserMsg.id
    })

    if (res) {
        mytodoList.value.forEach(it => {
            it.num = res[it.key]
        })

        completeList.value.forEach(it => {
            it.num = res[it.key]
        })
    }
}

/**
 * 获取通知公告列表
 */
const getUserMsgList = async () => {
    const res = await api.getaxiosdata("PutMsgnopage", {
        UDA4: 10,
        urgent: '1',
        ifread: false,
        user_id: UserMsg.id
    })

    if (res && res.length) {
        // 只显示最新的5条
        const temp = res.length < 5 ? res : res.slice(res.length - 6, res.length - 1)
        msgList.value = JSON.parse(JSON.stringify(temp))
    }
}

/**
 * 跳转到通知公告详情
 * @param {Object} row 公告数据
 */
const linkTo = (row) => {
    router.push({
        path: '/notice/affiche/view/' + row.id
    })
}

/**
 * 跳转到通知公告列表
 */
const more = () => {
    router.push({
        path: '/notice/list'
    })
}

/**
 * 处理菜单选择
 * @param {String} key 菜单key
 */
const handleSelect = (key) => {
    menuindex.value = key

    // 根据不同的菜单项设置不同的表格配置
    if (key == 'waitassign') {
        elTable_Options.value = {
            selection: false,
            getwayname: "backlog",
            pagetittype: "backlog_pagecount",
            searchList: [
                {
                    label: "关联信息编号、名称",
                    key: "search",
                    searchtype: 'input',
                    width: 220
                },
                {
                    label: "所属模块",
                    key: "model_type",
                    searchtype: 'select',
                    options: []
                },
                {
                    label: "信息类型",
                    key: "log_type",
                    searchtype: 'select',
                    options: []
                }
            ],
            eltableArr: [
                {
                    label: "关联信息编号",
                    prop: "code",
                    columType: 'linkTo',
                    width: 180
                },
                {
                    label: "关联信息名称",
                    prop: "name",
                    columType: 'text',
                    width: 140
                },
                {
                    label: "所属模块",
                    prop: "model_type",
                    columType: 'select',
                    commonVarrName: "model_type",
                    width: 120
                },
                {
                    label: "信息类型",
                    prop: "log_type",
                    columType: 'select',
                    commonVarrName: "task_message_type",
                    width: 120
                },
                {
                    label: "单据类型",
                    prop: "table_type_value",
                    columType: 'text',
                    width: 120
                },
                {
                    label: "操作类型",
                    prop: "operate_type",
                    columType: 'text'
                },
                {
                    label: "计划开始时间",
                    prop: "plan_start_time",
                    columType: 'time',
                    width: 130,
                },
                {
                    label: "计划结束时间",
                    prop: "plan_end_time",
                    columType: 'time',
                    width: 130,
                },
                {
                    label: "创建日期",
                    prop: "create_date",
                    columType: 'time',
                    width: 120,
                    fixed: "right"
                }
            ],
            addConditions: [
                {
                    key: "user_id",
                    value: UserMsg.id
                }
            ]
        }

        // 添加过滤条件
        if (fliterT.value.length) {
            elTable_Options.value.addConditions = elTable_Options.value.addConditions.concat(fliterT.value)
        }

        // 获取科室信息
        // getdepartmentData('sy_owndeptid')
    } else if (key == 'myapprove') {
        //待我审批
        elTable_Options.value = {
            selection: false, //多选
            //获取方法
            getwayname: "approvallist",
            pagetittype: "approvallists_pagecount",
            //获取详情方法
            getdetailwayname: "",
            //查询栏
            searchList: [{
                label: '审批编号、工单编号',
                key: 'search',
                searchtype: 'input',
                width: 200
            }, {
                label: '审批类型',
                key: 'approve_type',
                searchtype: 'select',
                width: 200,
                options: commonV.statusOption.approve_type
            },
            {
                label: '审批状态',
                key: 'approve_status',
                searchtype: 'select',
                options: commonV.statusOption.home_approve_type
            }
            ],
            //列表表头
            eltableArr: [{
                label: "审批编号",
                prop: "approve_code",
                sortable: true,
                columType: 'linkTo',
                width: 160,
                index: 3, //查看
            },
            {
                label: "审批类型",
                prop: "approve_type",
                columType: 'select',
                commonVarrName: "approve_type"
            }, {
                label: "创建时间",
                prop: "create_date",
                columType: 'time',
                type: 'yyyy-MM-dd HH:mm:ss',
            },
            {
                label: "工单编号",
                prop: "code",
                columType: 'text',
            },
            {
                label: "发起人",
                prop: "create_by",
                keyName: 'real_name',
                columType: 'objKey'
            },
            {
                label: "当前处理人",
                prop: "dealer",
                columType: 'arrayKey',
                width: 140,
                keyName: 'real_name'
            },
            {
                label: "审批状态",
                prop: "approve_status",
                columType: 'approveState',
                fixed: "right",
                type: 'approve',
                width: 110,
                commonVarrName: 'approve_status'
            },
            {
                label: "发起时间",
                prop: "come_date",
                columType: 'time',
                type: 'yyyy-MM-dd HH:mm:ss',
            }, {
                label: "备注",
                prop: "UDA3",
                columType: 'text',
            }
            ],
            //额外查询条件
            addConditions: [{
                key: 'dealer1',
                value: JSON.parse(localStorage.getItem("UserMsg")).id
            }, {
                key: 'not_finish',
                value: 2
            }]
        }
    } else if (key == "allwaitassign") {
        elTable_Options.value = {
            selection: false, //多选
            //获取方法
            getwayname: "backlog",
            pagetittype: "backlog_pagecount",
            //获取详情方法
            getdetailwayname: "",
            //查询栏
            searchList: [{
                label: "关联信息编号、名称",
                key: "search",
                searchtype: 'input',
                width: 220
            },
            {
                label: "所属模块",
                key: "model_type",
                searchtype: 'select',
                options: commonV.statusOption.model_type
            }, {
                label: "信息类型",
                key: "log_type",
                searchtype: 'select',
                options: commonV.statusOption.task_message_type
            }
            ],
            //列表表头
            eltableArr: [{
                label: "关联信息编号",
                prop: "code",
                columType: 'linkTo',
                width: 180
            }, {
                label: "关联信息名称",
                prop: "name",
                columType: 'text',
            },
            {
                label: "所属模块",
                prop: "model_type",
                columType: 'select',
                commonVarrName: "model_type"
            },
            {
                label: "信息类型",
                prop: "log_type",
                columType: 'select',
                commonVarrName: "task_message_type"
            },
            {
                label: "操作类型",
                prop: "operate_type",
                columType: 'text',
                width: 160
            }, {
                label: "计划开始时间",
                prop: "plan_start_time",
                columType: 'time',
                width: 130,
            }, {
                label: "计划结束时间",
                prop: "plan_end_time",
                columType: 'time',
                width: 130,
            },
            {
                label: "创建日期",
                prop: "create_date",
                columType: 'time',
                width: 120,
                fixed: "right"
            }
            ],
            addConditions: []
        }
    } else if (key == "mythreetask") {
        elTable_Options.value = {
            selection: false, //多选
            //获取方法
            getwayname: "threelevtasklist",
            //获取详情方法
            getdetailwayname: "",
            //查询栏
            searchList: [{
                label: "二级任务名称,单号、三级任务编号，三级任务名称",
                key: "search",
                searchtype: 'input',
                width: 380,
            },
            {
                label: "CASE类型",
                key: "case_type",
                searchtype: 'cascader',
                width: 200,
                options: commonV.statusOption.case_type2
            },
            {
                label: '三级任务状态',
                key: 'run_status',
                searchtype: 'select',
                options: commonV.statusOption.three_task_status
            },
            {
                label: "实际开始时间",
                key: "real_start_date",
                searchtype: 4,
                timeType: true, //带上时分秒
                width: 240
            }, {
                label: "实际结束时间",
                key: "real_end_date",
                searchtype: 'timeQuantum',
                timeType: true, //带上时分秒
                width: 240
            }, {
                label: "台架名称",
                key: "bench_name",
                width: 200,
                searchtype: 'input'
            },
            {
                label: "三级任务执行人",
                key: "sy_principal",
                searchtype: 'input'
            }, {
                label: "任务执行科室",
                key: "department", //级联选择器
                searchtype: 5,
                width: 240,
                options: [],
                props: {
                    checkStrictly: true,
                    value: "id",
                    label: "department_name",
                }
            }, {
                label: "是否为主工作流",
                key: "if_main_workfolw",
                searchtype: 'select',
                options: commonV.statusOption.boolint_status
            },
            ],
            //列表表头
            eltableArr: [{
                label: "二级任务单号",
                prop: "tltask_id",
                keyName: 'task_infomation',
                columType: 'objKey',
                width: 130
            }, {
                label: "二级任务名称",
                prop: "tltask_name",
                keyName: 'task_infomation',
                columType: 'objKey',
                width: 130
            }, {
                label: "三级任务编号",
                prop: "plan_code",
                columType: 'linkTo',
                width: 170
            },
            {
                label: "三级任务名称",
                prop: "plan_name",
                columType: 'text',
                width: 120
            }, {
                label: "创建人",
                prop: "create_by",
                keyName: 'real_name',
                columType: 'objKey',
            }, {
                label: "三级任务执行科室",
                prop: "department",
                columType: 'arrayKey',
                keyName: 'department_name',
                width: 140
            }, {
                label: "三级任务执行人",
                prop: 'sy_principal',
                width: 130,
                columType: 'arrayKey',
                keyName: 'real_name'
            }, {
                label: "CASE类型",
                prop: "case_type",
                columType: 'elcascaderVal',
                commonVarrName: 'case_type2',
                width: 130
            }, {
                label: "三级任务状态",
                prop: "run_status",
                columType: 'select',
                fixed: 'right',
                type: "link",
                commonVarrName: 'three_task_status',
                width: 140,
            }, {
                label: "是否为主工作流",
                prop: "if_main_workfolw",
                columType: 'select',
                commonVarrName: 'boolint_status',
                width: 140
            }, {
                label: "台架名称",
                prop: "bench",
                columType: 'arrayKey',
                keyName: "device_name",
                width: 110
            },
            ],
            addConditions: [{
                key: "select_type",
                value: "backlog"
            }, {
                key: "user_id",
                value: JSON.parse(localStorage.getItem("UserMsg")).id
            }]
        }
    } else if (key == 'myTwoTask') {
        elTable_Options.value = {
            selection: false, //多选
            //获取方法
            getwayname: "twoleveltasklist", //twoleveltasklist twoleveltask  new*
            pagetittype: "twoleveltask_p_pagecount",
            //获取详情方法
            getdetailwayname: "",
            //列表表头
            eltableArr: [
                {
                    label: "二级任务编号",
                    prop: "tltask_id",
                    columType: 'linkTo',
                    sortable: true,
                    width: 160
                },
                {
                    label: "二级任务名称",
                    prop: "tltask_name",
                    columType: 'text',
                    width: 140
                },
                {
                    label: "试验员",
                    prop: "sy_principal",
                    columType: 'arrayKey',
                    keyName: "real_name"
                },
                {
                    label: "计划员",
                    prop: "sy_planer",
                    width: 120,
                    columType: 'arrayKey',
                    keyName: "real_name"
                },
                {
                    label: "试验经理",
                    prop: "sy_manager",
                    columType: 'arrayKey',
                    keyName: "real_name",
                    width: 120
                },
                {
                    label: "是否外委",
                    prop: "is_outsourcing",
                    width: 120,
                    columType: 'select',
                    commonVarrName: "boolint_status"
                },
                {
                    label: "计划状态",
                    prop: "plan_status",
                    fixed: "right",
                    columType: 'select',
                    commonVarrName: "plan_status",
                    width: 120
                },
                {
                    label: "二级任务状态",
                    prop: "task_status",
                    fixed: "right",
                    columType: 'select',
                    commonVarrName: "two_task_status",
                    width: 130
                },
                {
                    label: "执行科室",
                    prop: "sy_rundeptid",
                    columType: 'arrayKey',
                    keyName: "department_name",
                    width: 120,
                },
                {
                    label: "执行科室科长",
                    prop: "receive_user",
                    columType: 'arrayKey',
                    keyName: "real_name",
                    width: 130
                },
                {
                    label: "试验地点",
                    prop: "test_place",
                    columType: 'text',
                    width: 120
                },
                {
                    label: "参与执行人",
                    prop: "sy_participants",
                    columType: 'arrayKey',
                    keyName: "real_name",
                    width: 130
                }
            ],
            addConditions: [
                {
                    key: "task_type",
                    value: 1
                },
                {
                    key: "nobackstatus",
                    value: true
                },
                {
                    key: 'notwofinish',
                    value: 'true'
                },
                {
                    key: "select_type",
                    value: "mycharge"
                },
                {
                    key: "user_id",
                    value: JSON.parse(localStorage.getItem("UserMsg")).id
                },
                {
                    key: "is_delete",
                    value: false
                }
            ],
            //查询栏
            searchList: [
                {
                    label: "二级任务名称,编号",
                    key: "search",
                    searchtype: 'input',
                    width: 280
                },
                {
                    label: "台架名称",
                    key: "bench_name",
                    width: 200,
                    searchtype: 'input',
                },
                {
                    label: "项目编号",
                    key: "project_id",
                    searchtype: 'input',
                },
                {
                    label: "计划状态",
                    key: "plan_status",
                    searchtype: 'select',
                    options: commonV.statusOption.plan_status
                },
                {
                    label: "二级任务状态",
                    key: "task_status",
                    searchtype: 'select',
                    options: commonV.statusOption.two_task_status
                },
                {
                    label: "是否外委",
                    key: "is_outsourcing",
                    searchtype: 'select',
                    options: commonV.statusOption.bool_status
                }
            ]
        }
    }

    // 获取表格数据
    conditionalQuery()
}

/**
 * 切换待办项
 * @param {Number} idx 待办项索引
 */
const changeicon = (idx) => {
    index.value = idx
    if (index.value != 5) {
        filterData(idx)
        handleSelect("waitassign")
        return
    }
    handleSelect("myapprove")
}

/**
 * 过滤数据
 * @param {Number} idx 待办项索引
 */
const filterData = (idx) => {
    if (idx === 0) {
        // 全部
        fliterT.value = []
    } else if (idx === 1) {
        // 任务单
        fliterT.value = [{
            key: "log_type",
            value: 1
        }]
    } else if (idx === 2) {
        // 子任务单
        fliterT.value = [{
            key: "log_type",
            value: 2
        }]
    } else if (idx === 3) {
        // 维修单
        fliterT.value = [{
            key: "table_type",
            value: 4
        }]
    } else if (idx === 4) {
        // 保养单
        fliterT.value = [{
            key: "log_type",
            value: 4
        }]
    } else if (idx === 6) {
        // 资源
        fliterT.value = [{
            key: "log_type",
            value: 5
        }]
    }
}

/**
 * 获取当前在线人数
 */
const getOnlinePerson = async () => {
    const res = await api.getaxiosdata("get_online")
    if (res) {
        On_line_Preson.value = res.count
    }
}

/**
 * 获取总登录人数
 */
const getAllPerson = async () => {
    const res = await api.getaxiosdata("count_loginuser")
    if (res) {
        All_Preson.value = res.count
    }
}

/**
 * 条件查询
 */
const conditionalQuery = () => {
    nextTick(() => {
        myeltable.value.conditional()
    })
}

/**
 * 获取科室数据
 * @param {String} key 科室key
 */
const getdepartmentData = async (key) => {
    const obj = await commonV.getdepartmentData(elTable_Options.value.searchList, key)
    if (obj) {
        elTable_Options.value.searchList[obj.ink].options = obj.departmentArr
    }
}

let handleClick = (row,) => {}
</script>

<style lang="scss" scoped>
.home-page-container {
    padding: 20px;
    width: 100%;
    height: 100%;
    overflow-y: auto;

    .online-person {
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: #fff;
        padding: 10px 20px;
        margin-bottom: 20px;
        border-radius: 4px;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);

        .person-info {
            display: flex;
            align-items: center;
            width: 35%;

            .person-count,
            .total-count {
                width: 50%;
                text-align: center;
            }

            .person-icon {
                margin-right: 18px;
                font-size: 18px;
            }

            .label {
                color: #99A9BF;
            }

            .value {
                font-weight: 600;
                color: #1F2D3D;
            }
        }

        .department-info {
            width: 40%;
            display: flex;
            align-items: center;
        }
    }

    .todo-section {
        display: flex;
        margin-bottom: 20px;
        gap: 1%;

        .card {
            background: #FFFFFF;
            box-shadow: 0px -1px 0px 0px #E5E9F2;
            border-radius: 4px;

            &.my-todo {
                width: 55%;
            }

            &.notification-card {
                width: 26%;
            }

            &.completion-card {
                width: 17%;
            }

            .card-title,
            .card-header {
                height: 40px;
                display: flex;
                align-items: center;
                padding-left: 20px;
                background: #F9FAFC;
                border-bottom: 1px solid #E5E9F2;

                span {
                    margin-left: 10px;
                }
            }

            .card-header {
                justify-content: space-between;
                padding-right: 10px;

                .header-left {
                    display: flex;
                    align-items: center;
                }
            }

            .card-content {
                height: 149px;
                display: flex;
                justify-content: space-around;
                align-items: center;
            }
        }
    }

    .divider {
        width: 100%;
        height: 1px;
        background: #D3DCE6;
        margin: 10px 0;
    }

    .table-container {
        // padding: 10px;

        .table-menu {
            margin-bottom: 10px;
        }

        .table-content {
            margin-top: 10px;
        }
    }
}

.my-todo {
    .todo-item {
        width: 70px;
        height: 100px;
        display: flex;
        flex-direction: column;
        align-items: center;
        cursor: pointer;
        justify-content: space-around;
        color: #99A9BF;

        &.active {
            color: #1F2D3D;
        }

        .todo-count {
            font-size: 18px;
            margin-top: 10px;
        }

        .todo-label {
            font-size: 12px;
        }
    }
}

.notification-card {
    .notification-content {
        height: 149px;
        display: flex;
        flex-direction: column;
        padding: 10px;

        .notification-item {
            width: 100%;
            height: 30px;
            padding: 0 10px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            cursor: pointer;

            .notification-text {
                width: 70%;
                height: 100%;
                display: flex;
                align-items: center;
                color: #1F2D3D;
                font-size: 14px;
                overflow: hidden;
                text-overflow: ellipsis;
            }

            .notification-date {
                color: #C3CDD8;
                font-size: 12px;
            }
        }
    }

    .empty-notification {
        height: 149px;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #99A9BF;
    }
}

.completion-card {
    .completion-content {
        height: 149px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        flex-direction: column;

        .completion-item {
            width: 100%;
            height: 50%;
            display: flex;
            align-items: center;
            justify-content: space-around;

            .completion-label {
                font-size: 12px;
                color: #99A9BF;
            }

            .completion-value {
                font-size: 32px;
                color: #1F2D3D;
            }
        }
    }
}

::v-deep(.el-menu) {
    background-color: #ffffff !important;

    .el-menu-item {
        font-size: 13px;
    }
}
</style>